<template>
<div class="main-box-right-bottom">
    <h2 class="title">猜你喜欢</h2>
    <p class="title-p">为你挑选最合适的</p>
    <div class="shop-box">
        <a href="#" class="shop" v-for="val in shopinfo " :key="val.shopId">
            <img :src="val.shopCover" width="190px" height="110px">
            <p class="name">{{val.shopName}}</p>
            <p class="assess">评分:{{val.shopMark}}</p>
            <p class="addr">地址:{{val.shopLocation}}</p>
            <!-- <p class="price">￥ <b>5.01</b></p> -->
        </a>
    </div>
  
</div>
  
</template>

<script>
import {getshopinfo} from '../../../api/personalData/shop/index'

export default {
    name:'Guesslike',
    data() {
        return {
            shopinfo:''
        }
    },
    methods:{
        getShopinfo(){
            getshopinfo().then(data =>{
                 const list =data.data.data
                console.log(data.data.data);
                this.shopinfo = list
            })
        }
    },
    created(){
        this.getShopinfo();
    }

}
</script>

<style lang="less" scoped>
.main-box-right-bottom{
        margin-top: 20px;
        width: 100%;
        height: auto;
        border-radius: 4px;
        background-color: #ffffff;
        border: 1px solid #e5e5e5;
        position: relative;
}
.title{
    display: inline-block;
    padding: 20px;
    font-weight: 400;
}
.title-p{
    display: inline-block;
    padding: 10px;
    color: rgb(167, 167, 167);
}
.shop-box{
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    justify-content: left;
    flex-wrap:wrap;
    .shop{
        width: 190px;
        padding: 10px;
        text-decoration: none;
        display: inline-block;
        &:hover{
            background-color: rgba(224, 224, 224, 0.5);
        }
        p{
            padding-left: 5px;
            width: 80%;
            color: black;
            font-size: 14px;
            margin-top: 5px;
            overflow: hidden;  //溢出隐藏
            text-overflow: ellipsis; //省略号
            white-space: nowrap;  //不换行
        }
        .addr{
            color: rgb(167, 167, 167);
        }
        .price{
            font-size: 18px;
            color: orange;
        }
    }
}

</style>